<!--
 * @Author: your name
 * @Date: 2020-09-02 10:21:44
 * @LastEditTime: 2020-09-02 15:17:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tinkjsDemo\antd-vue-pro\tests\demo\数组变化监听.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const arr=[1,2,3,4,5];

        let ArrayMethods = Object.create(Array.prototype); //复制了一份array的原型

        console.log(ArrayMethods);

        const methodsName=['push','pop','splice','reverse','shift','unshift','sort'];

        methodsName.forEach(function(method){
            const oldMethod = ArrayMethods[method];
            Object.defineProperty(ArrayMethods,method,{
                value:function(...args){
                    console.log(`通过${method}改变了数组！`);
                    return oldMethod.apply(this,args);
                }
            })
        })

        arr.__proto__ = ArrayMethods;

        arr.push(6);
        console.log(arr);
        arr.pop();
        console.log(arr);
        arr.reverse();
        console.log(arr);
        arr.splice(3);
        console.log(arr);
    </script>
</body>
</html>